<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider breakpoint="lg" collapsed-width="0">
      <div class="logo" />
      <div class="logo-tit">
        <p>柠檬驿家</p>
      </div>
      <a-menu
        v-model:selectedKeys="selectedKeys"
        @click="MenuItem"
        theme="dark"
        mode="inline"
      >
      <!-- 权限管理，只有管理员才能看到节点控制，其余权限无法查看 -->
      <div v-if="rootRole==='1'">
        <a-menu-item key="1">
          <span class="nav-text">节点控制管理</span>
        </a-menu-item>
        <a-menu-item key="2">
          <span class="nav-text">酒店房间管理</span>
        </a-menu-item>
      </div>
      <div v-else>
        <a-menu-item key="2">
          <span class="nav-text">酒店房间管理</span>
        </a-menu-item>
      </div>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header
        style="background-color: rgb(240, 242, 245)"
        class="user-nav"
      >
        <div class="tit">
          <p>{{ userName }}&nbsp;欢迎您</p>
        </div>
        <div class="account">
          <a-dropdown v-model:visible="visible" class="account-tit">
            <a class="ant-dropdown-link" @click.prevent>
              {{ userName }}
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu @click="handleMenuClick" class="account-list">
                <a-menu-item key="1" @click="bindExit">切换账号</a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </a-layout-header>
      <section
        class="layout-container"
        style="overflow: hidden; overflow-y: auto"
      >
        <router-view></router-view>
      </section>
    </a-layout>
    <!-- 切换账号对话框 -->
    <a-modal
      v-model:visible="visibleExit"
      title="是否切换账号"
      @ok="handleOkExit"
    >
      <p>切换账号自动退出当前账户，并返回到登录页面</p>
    </a-modal>
  </a-layout>
</template>
<script setup>
import { ref } from "vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { message } from "ant-design-vue";
import router from "@/router";
const userName = ref();
const rootRole = ref('1');
const users = JSON.parse(sessionStorage.getItem("user"));
// 用户权限
rootRole.value = users.role;
// 判断是否有用户信息，没有代表没有登录
if (users) {
  userName.value = users.username;
} else {
  console.log("没有登录");
}

// 默认选择第一个
const selectedKeys = ref(['1']);
const MenuItem = (item) => {
  switch (item.key) {
    case "1":
      router.push("/admin/nodeControl");
      break;
    case "2":
      router.push("/admin/hotelMant");
      break;
  }
};
const visible = ref(false);
const handleMenuClick = (e) => {
  if (e.key === "2") {
    visible.value = false;
  }
};
const visibleExit = ref(false);

// 退出登录
const bindExit = () => {
  visibleExit.value = true;
};
const handleOkExit = () => {
  sessionStorage.clear();
  router.push("/login");
  message.success("退出登录");
};
</script>
<style>
.ant-layout-has-sider {
  height: 100vh;
}
.logo-tit {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  width: 100%;
  height: 60px;
}
.logo-tit p {
  margin: 0;
  font-size: 20px;
  color: #fff;
  font-weight: bolder;
}
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.site-layout-sub-header-background {
  background: #fff;
}

.site-layout-background {
  background: #fff;
}

[data-theme="dark"] .site-layout-sub-header-background {
  background: #141414;
}

.user-nav {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}
.user-nav .tit {
  font-size: 25px;
  font-weight: bold;
}
.user-nav .account .account-tit {
  width: 200px;
  height: 50px;
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  padding: 15px;
  border-radius: 10px;
  color: black;
}
</style>